<template>
	<view>
		<!-- 步骤进度条 -->
		<view class="progress-wrapper">
			<view class="line"></view>
			<view class="progress-step" v-for="(step, index) in steps" :key="index">
				<view class="step-circle" :class="{ 'completed': index < currentStep }">
					<text v-if="index < currentStep" class="step-num">{{ index + 1 }}</text>
					<text v-else class="step-num">{{ index + 1 }}</text>
				</view>
				<view class="step-line">{{step}}</view>
			</view>
		</view>
		
		<view class="authentication-info">
			<view class="company-info info-chunk">
				<view class="apply-input-wrap">
					<text>店铺名称</text>
					<input type="text" class="input-content" v-model="infoData.store_name" placeholder="请输入店铺名称" />
				</view>
				<view class="apply-input-wrap apply-input-bot">
					<text>客服电话</text>
					<input type="text" class="input-content" v-model="infoData.store_tel" placeholder="请输入客服电话" />
				</view>
				<view class="apply-input-wrap apply-input-bot">
					<text>联系邮箱</text>
					<input type="text" class="input-content" v-model="infoData.contacts_email" placeholder="请输入联系人邮箱" />
				</view>
				<view class="item-wrap">
					<view class="form-wrap input-img">
						<text class="label">门头照片</text>
						<view class="img-wrap" @click="uplodImg('store_banner')">
							<text class="iconfont iconadd1" v-if="!infoData.store_banner"></text>
							<image v-else :src="$util.img(infoData.store_banner)" mode="aspectFit"></image>
						</view>
					</view>
					<view class="form-wrap input-img">
						<text class="label">店内照片</text>
						<view class="img-wrap" @click="uplodImg('store_photo')">
							<text class="iconfont iconadd1" v-if="!infoData.store_photo"></text>
							<image v-else :src="$util.img(infoData.store_photo)" mode="aspectFit"></image>
						</view>
					</view>
				</view>	
				<view class="apply-input-wrap more-wrap">
					<text>特殊资质</text>
					<picker class="" mode="selector" :value="selectStoreType.key" :range="storeTypeArr" @change="storeTypeChange">
						<text class="uni-input" :class="{ 'color-tip': !selectStoreType.value }">{{ selectStoreType.value ? selectStoreType.value : '请选择特殊资质' }}</text>
						<text class="iconfont iconright"></text>
					</picker>
				</view>
				<view class="item-wrap" v-if="infoData.store_type > 0">
					<view class="form-wrap input-img">
						<text class="label">特殊资质照片</text>
						<view class="img-wrap" @click="uplodImg('store_type_pic')">
							<text class="iconfont iconadd1" v-if="!infoData.store_type_pic"></text>
							<image v-else :src="$util.img(infoData.store_type_pic)" mode="aspectFit"></image>
						</view>
					</view>
				</view>	
			</view>

			<loading-cover ref="loadingCover"></loading-cover>
		</view>

		<view class="set-next">
			<button type="default" @click="toPrevious()">上一步</button>
			<button type="primary" @click="save()">提交</button>
		</view>
	</view>
</template>

<script>
import validate from '@/common/js/validate.js';
export default {
	data() {
		return {
			steps: ['基本信息', '商户资料', '银行账户', '线上店铺'],
			currentStep: 4,
			shopInfo: {
				site_id: '',
				website_id: '',
				category_name: '',
				category_id: '',
				site_name: ''
			},
			webCityArr: {
				key: [],
				value: []
			},
			selectWebCity: {
				key: '',
				value: ''
			},
			categoryArr: {
				key: [],
				name: [],
				value: []
			},
			selectCategory: {
				key: '',
				value: ''
			},
			applyYearArr: ['1年', '2年', '3年', '4年', '5年'],
			selectApplyYear: {
				key: '',
				value: ''
			},
			storeTypeArr: ['无特殊资质','社会团体法人证书','基金会法人登记证书','办学许可证','医疗结构办学许可证','经营保险业务许可证','保险业务法人等级证书','民办教育许可证','收费证明文件'],
			selectStoreType: {
				key: '',
				value: ''
			},
			applyMoney: {
				paying_deposit: '',
				paying_apply: '',
				paying_amount: ''
			},
			infoData: {
				site_id: 0,
				store_name: '',
				store_banner: '',
				store_photo: '',
				store_tel: '',
				store_type: 0,
				store_type_pic: '',
				contacts_email: ''
			},
			is_city: 0
		};
	},
	async onShow() {
		await this.initData();
		this.getShopInfo();
	},
	methods: {
		async initData() {
			var res = await this.$api.sendRequest({
				url: '/shopapi/apply/certInfo',
				async: false
			});
			let data = res.data;
			if (res.code == 0 && data) {
				if (data.shop_cert_info) {
					let initData = data.shop_cert_info;

					this.infoData.store_name = initData.store_name;
					this.infoData.group_name = initData.group_name;
					this.infoData.group_id = initData.group_id;
					this.infoData.store_banner = initData.store_banner;
					this.infoData.store_photo = initData.store_photo;
					this.infoData.store_tel = initData.store_tel;
					this.infoData.store_type = initData.store_type;
					this.infoData.store_type_pic = initData.store_type_pic;
					this.infoData.contacts_email = initData.contacts_email;
					
					this.selectStoreType.key = initData.store_type;
					this.selectStoreType.value = this.storeTypeArr[initData.store_type];
					this.$forceUpdate();
				}
			}
		},
		storeTypeChange(e) {
			let index = parseInt(e.detail.value);
			this.selectStoreType.key = index;
			this.selectStoreType.value = this.storeTypeArr[index];
			this.infoData.store_type = index;
		},
		uplodImg(type) {
			this.$util.upload(
				{
					number: 1,
					path: 'image'
				},
				res => {
					if (res) {
						this.$util.showToast({
							title: '上传成功'
						});
						if (type == 'store_photo') this.infoData.store_photo = res[0];
						else if (type == 'store_banner') this.infoData.store_banner = res[0];
						else if (type == 'store_type_pic') this.infoData.store_type_pic = res[0];
					}
				}
			);
		},
		getShopInfo() {
			var data = uni.getStorageSync('shop_info') ? JSON.parse(uni.getStorageSync('shop_info')) : null;
			if (data) {
				this.infoData.site_id = data.site_id;
			}
			if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
		},
		vertify() {
			let rule = [];
			rule = [
				{ name: 'store_name', checkType: 'required', errorMsg: '请输入店铺名称' },
				{ name: 'store_tel', checkType: 'required', errorMsg: '请输入客服电话' },
				{ name: 'contacts_email', checkType: 'required', errorMsg: '请输入联系人邮箱' },
				{ name: 'store_banner', checkType: 'required', errorMsg: '请上传门头照片' },
				{ name: 'store_photo', checkType: 'required', errorMsg: '请上传店内照片' },
			];

			let checkRes = validate.check(this.infoData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				return false;
			}
		},
		toPrevious() {
			this.$util.redirectTo('/pages/apply/bankInfo');
		},
		async save() {
			if (!this.vertify()) return false;
			let openInfoObj = uni.getStorageSync('openInfo') ? JSON.parse(uni.getStorageSync('openInfo')) : null;
			let bankInfoObj = uni.getStorageSync('bankInfo') ? JSON.parse(uni.getStorageSync('bankInfo')) : null;
			let obj = this.infoData;
			if (openInfoObj) obj = Object.assign(this.infoData, openInfoObj);
			if (bankInfoObj) obj = Object.assign(this.infoData, bankInfoObj);
			this.$api.sendRequest({
				url: '/shopapi/apply/applyCert',
				data: obj,
				success: res => {
					if (res.code == 0) {
						uni.removeStorageSync('openInfo');
						uni.removeStorageSync('bankInfo');
						this.$util.redirectTo('/pages/apply/cert',{},'reLaunch');
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
	.authentication-info {
		overflow: hidden;
		margin: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.info-chunk {
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
	.company-info {
		.apply-input-bot {
			border-bottom: 2rpx solid $color-line;
		}
		.apply-input-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 100rpx;
			border-top: 2rpx solid $color-line;
			&:first-of-type {
				border: none;
			}
			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;
					&.have {
						color: $color-title;
					}
				}
				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}
			.input-content {
				text-align: right;
				font-size: $font-size-base;
				flex: 1;
			}
			.unit {
				margin-left: 20rpx;
				width: 40rpx;
			}
			.input-img {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 40rpx 0;
				width: 300rpx;
				height: 140rpx;
				border: 2rpx dashed $color-disabled;
				.iconfont {
					font-size: 68rpx;
					color: $color-disabled;
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.set-next {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
		padding-bottom: 80rpx;
		button {
			flex: 1;
		}
	}
	.item-wrap {
		margin-top: 20rpx;
		background-color: #fff;
		&.type {
			padding: 20rpx 30rpx;
		}
		.form-wrap {
			display: flex;
			align-items: center;
			margin: 0 $margin-both;
			border-bottom: 1px solid $color-line;
			height: 100rpx;
			line-height: 100rpx;
			&:last-child {
				border-bottom: none;
			}
			.label {
				margin-right: $margin-both;
				vertical-align: middle;
			}
			input {
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
			}
			&.more-wrap {
				.selected {
					vertical-align: middle;
					display: inline-block;
					flex: 1;
					text-align: right;
					color: $color-tip;
					overflow: hidden;
					white-space: pre;
					text-overflow: ellipsis;
					&.have {
						color: $color-title;
					}
				}
				.iconfont {
					color: $color-tip;
					margin-left: 20rpx;
				}
			}
			.value {
				font-weight: bold;
				vertical-align: middle;
				display: inline-block;
				flex: 1;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre;
			}
			&.input-img {
				height: 200rpx;
				line-height: 200rpx;
				display: block;
				.img-wrap {
					float: right;
					display: inline-block;
					margin-top: 30rpx;
					width: 300rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx dashed $color-disabled;
					.iconfont {
						font-size: 68rpx;
						color: $color-disabled;
					}
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.type-wrap {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			margin: 20rpx 30rpx;
			view {
				flex: 1;
				position: relative;
				margin-right: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: $color-tip;
				border: 2rpx solid $color-disabled;
				&:last-child {
					margin-right: 0;
				}
				.iconfont {
					position: absolute;
					right: -22rpx;
					bottom: -22rpx;
					font-size: 80rpx;
					display: none;
				}
				&.selected {
					.iconfont {
						display: block;
					}
				}
			}
		}
	}
	.progress-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 66rpx 0;
		background-color: #fff;
		.line {
			height: 14rpx;
			width: 80%;
			background-color: #f9f9f9;
			border-radius: 20rpx;
			display: block;
			position: absolute;
			top: 90rpx;
			left: 10%;
		}
		
		.progress-step {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 25%;
		}
		
		.step-circle {
		  width: 52rpx;
		  height: 52rpx;
		  border-radius: 50%;
		  background-color: #f6f6f6;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  position: relative;
		  box-shadow: 0 0 0px 14rpx #f6f6f6;
		  color: #999;
		  font-weight: bold;
		}
		
		.completed {
		  background-color: #ff6a00;
		  box-shadow: 0 0 0px 14rpx #ff00002e;
		  color: #FFF;
		}
		
		.step-line {
			margin-top: 50rpx;
		}
	}
	
	.apply_button {
		margin: 60rpx 20%;
		padding-bottom: 80rpx;
		text-align: center;
		.tips {
			margin: 20rpx 0;
			font-size: $font-size-tag;
		}

		button {
			margin-top: 40rpx;
		}
	}
</style>
